Skip to content

Add Electron 42 window blur appearance setting#155

Merged
ryota-murakami merged 1 commit into
mainfrom
codex/update-deps-electron-opacity
May 11, 2026
Merged

Add Electron 42 window blur appearance setting#155
ryota-murakami merged 1 commit into
mainfrom
codex/update-deps-electron-opacity

Conversation

@ryota-murakami

@ryota-murakami ryota-murakami commented May 11, 2026

Copy link
Copy Markdown
Contributor

Summary

  • update remaining dependencies to latest ranges and keep pnpm lockfile current
  • replace Appearance mock controls with a persisted Opacity / Blur slider backed by Electron 42 contentView blur
  • lock Markdown Reading Mode to vertical scrolling by wrapping wide code/table content

Verification

  • pnpm outdated --format json -> {}
  • coderabbit review --agent --base main --no-color (local CLI; actionable findings addressed, defensive setBackgroundColor guard intentionally kept)
  • pnpm validate
  • pnpm test:e2e
  • qa-electron scoped UI check: Appearance slider updates main window blur state; Reading Mode pane/code scrollLeft stays 0

Summary by CodeRabbit

  • 新機能
    • 外観設定にウィンドウ背景ぼかし(半径)スライダーと「デフォルトにリセット」機能を追加。変更は即時プレビューされ、遅延して保存されます。
  • 改善
    • ネイティブウィンドウで背景ぼかしを有効化し、アプリ背景の見た目を状態に応じて反映するようにしました。
    • マークダウン閲覧モードでの折り返しと横スクロール抑制、テーブルの表示安定化を強化。
  • テスト
    • ぼかし半径のバリデーション、UI操作、IPC回帰テストを追加。
  • Chores
    • 開発依存の一部パッケージを更新。

Review Change Stack

@vercel

vercel Bot commented May 11, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
skills-desktop Ready Ready Preview, Comment May 11, 2026 6:34pm

Request Review

@codecov-commenter

codecov-commenter commented May 11, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 78.12500% with 14 lines in your changes missing coverage. Please review.
✅ Project coverage is 53.01%. Comparing base (cd4f322) to head (b872bc8).

Files with missing lines Patch % Lines
src/main/ipc/settings.ts 0.00% 4 Missing ⚠️
src/renderer/settings/sections/Appearance.tsx 88.88% 3 Missing and 1 partial ⚠️
src/main/index.ts 0.00% 3 Missing ⚠️
src/renderer/src/App.tsx 0.00% 3 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #155      +/-   ##
==========================================
+ Coverage   52.56%   53.01%   +0.45%     
==========================================
  Files         177      178       +1     
  Lines        4429     4493      +64     
  Branches      920      930      +10     
==========================================
+ Hits         2328     2382      +54     
- Misses       1903     1911       +8     
- Partials      198      200       +2     
Flag Coverage Δ
unittests 53.01% <78.12%> (+0.45%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@coderabbitai

coderabbitai Bot commented May 11, 2026

Copy link
Copy Markdown
Contributor

Caution

Review failed

Pull request was closed or merged during review

Walkthrough

このPRは persisted の windowBackgroundBlurRadius 設定をスキーマ/DEFAULT_SETTINGSで追加し、ブラー用ユーティリティとメインプロセス統合(起動時適用・settings:set ハンドラ)、レンダー側のスライダー UI と App のブラー認識スタイリングを追加します。加えて Markdown Reading Mode の横スクロール防止(CSS/レンダラ)と関連テスト、および少数の依存関係バージョンアップを含みます。

Changes

Window Background Blur Feature

Layer / File(s) Summary
Shared Schema & Defaults
src/shared/settings.ts, src/shared/settings.test.ts
WINDOW_BACKGROUND_BLUR_MIN_RADIUS/MAX_RADIUSWINDOW_BACKGROUND_BLUR_RADIUS_SCHEMA を追加。SettingsSchemaDEFAULT_SETTINGSwindowBackgroundBlurRadius を導入し、デフォルト・境界・整数性をテストで検証。
Blur utilities & tests
src/main/utils/windowBackgroundBlur.ts, src/main/utils/windowBackgroundBlur.test.ts
normalizeWindowBackgroundBlurRadius(), getMainWindowBackgroundColor(), applyWindowBackgroundBlur() を実装。contentView の存在チェックで安全に操作し、ユニットテストでクランプとフォールバックを検証。
IPC schema & handler
src/main/ipc/ipc-schemas.ts, src/main/ipc/ipc-schemas.test.ts, src/main/ipc/settings.ts
settings:set 引数スキーマに optional windowBackgroundBlurRadius を追加。IPC テストで境界/整数性/省略時挙動を検証。ハンドラは保存差分後にブラー差分を検出して mainWindow に適用(nullチェックあり)。
Main window init
src/main/index.ts
createWindow() で設定をキャッシュし、MAIN_WINDOW_OPAQUE_BACKGROUNDtransparent: true を使って BrowserWindow を生成。ウィンドウ作成後に applyWindowBackgroundBlur(window, settings.windowBackgroundBlurRadius) を呼ぶ。
Renderer: Appearance UI
src/renderer/settings/sections/Appearance.tsx, src/renderer/settings/sections/Appearance.browser.test.tsx
BackgroundBlurRangeInput と Appearance コンポーネント(ローカルドラフト、デバウンス、リセット)を追加。ブラウザテストでスライダー操作が electron.settings.set を呼ぶことを検証。
App-level styling
src/renderer/src/App.tsx
settings.windowBackgroundBlurRadius > 0 を基に hasWindowBackgroundBlur を計算し、トップレベル wrapper の背景クラスを条件付きで bg-background/85 に切り替え。
Storybook & service fixtures
.storybook/fixtures.ts, src/main/services/settings.test.ts
storySettings...DEFAULT_SETTINGS で構築するよう更新。service テストの baseSettingswindowBackgroundBlurRadius を追加。
Dependency updates
package.json
tailwind-merge 3.5.0→3.6.0、vite 8.0.11→8.0.12、vitest と関連ツール 4.1.5→4.1.6、lint-staged 小幅アップデート。

Markdown Reading Mode Layout Fixes

Layer / File(s) Summary
Reading Mode CSS
src/renderer/src/styles/globals.css
.markdown-reading-prose を追加し、body の背景を transparent に変更。プロース向け幅制約、overflow-wrap、pre/code/table の折り返しと table-layout: fixed を適用。
FileContent renderers
src/renderer/src/components/skills/FileContent.tsx, src/renderer/src/components/skills/FileContent.browser.test.tsx
articlereact-markdowncode/pre/table レンダラを max-w-full overflow-x-hidden に変更し、td/thbreak-words を追加。テストでブロック単位の横スクロールが発生しないことを検証。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed タイトルはElectron 42のウィンドウブラー機能を追加するという主要な変更を正確に要約しており、全ファイルの変更と一貫している。
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch codex/update-deps-electron-opacity

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/main/services/settings.test.ts (1)

27-34: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

windowBackgroundBlurRadius の差分比較ケースを明示追加してください

Line 27 の「primitive差分」テストは defaultSkillTab のみを変更しており、areSettingsEqualwindowBackgroundBlurRadius を比較し忘れた退行を検出できません。blur値だけを変えるケースを1件追加して固定してください。

Diff案
+  it('returns false when windowBackgroundBlurRadius differs', () => {
+    expect(
+      areSettingsEqual(
+        { ...baseSettings, windowBackgroundBlurRadius: 0 },
+        { ...baseSettings, windowBackgroundBlurRadius: 1 },
+      ),
+    ).toBe(false)
+  })
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/main/services/settings.test.ts` around lines 27 - 34, Add a dedicated
test case to verify that areSettingsEqual detects changes to
windowBackgroundBlurRadius: create a new it(...) similar to the existing
primitive-diff test that calls areSettingsEqual(baseSettings, { ...baseSettings,
windowBackgroundBlurRadius: baseSettings.windowBackgroundBlurRadius + 1 }) and
assert toBe(false). Reference areSettingsEqual and baseSettings so the test
fails if the blur comparison is missing.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/main/ipc/ipc-schemas.test.ts`:
- Around line 130-141: The test for invalid windowBackgroundBlurRadius only
checks a fractional value and an over-max value; add a lower-bound failure case
by asserting schema.safeParse([{ windowBackgroundBlurRadius:
WINDOW_BACKGROUND_BLUR_MIN_RADIUS - 1 }]).success.toBe(false) (use the min
constant paired with WINDOW_BACKGROUND_BLUR_MAX_RADIUS) so the suite covers both
boundary sides; add this expectation alongside the existing safeParse checks in
the same it('rejects an invalid windowBackgroundBlurRadius value', ...) block
referencing schema.safeParse.

In `@src/main/utils/windowBackgroundBlur.test.ts`:
- Around line 12-35: Add unit tests for applyWindowBackgroundBlur that cover
both branches when the BrowserWindow API supports setBackgroundBlur and when it
does not: create minimal mock window objects (one with setBackgroundBlur and one
without) that spy on setBackgroundBlur and setBackgroundColor; call
applyWindowBackgroundBlur with values that exercise clamping (e.g., -12, 12,
WINDOW_BACKGROUND_BLUR_MAX_RADIUS) and with 0 vs non-zero to check background
color selection, then assert that when setBackgroundBlur exists it was called
with the clamped radius and when absent it was not called, and in both cases
assert setBackgroundColor was called with MAIN_WINDOW_OPAQUE_BACKGROUND for
radius 0 and MAIN_WINDOW_BLURRED_BACKGROUND for non-zero.

In `@src/renderer/settings/sections/Appearance.tsx`:
- Around line 52-53: The onChange handler (handleInputChange) currently calls
updateSettings on every slider event causing IPC/save/broadcast storms; change
it so onChange only updates local UI state, and debounce or delay calls to
updateSettings (or call updateSettings only on commit/end interaction) to limit
persistence frequency; implement this by adding a debounced wrapper (e.g.,
useRef + setTimeout or lodash.debounce) around updateSettings or adding an
onChangeCommitted/onMouseUp handler that calls updateSettings once, and ensure
functions named handleInputChange and updateSettings are the only places
modified.

In `@src/renderer/src/components/skills/FileContent.browser.test.tsx`:
- Around line 136-140: The test is scrolling the text node instead of the actual
scroll container; locate the nearest <pre> from the element returned by
screen.getByText(/wide command/) (use .closest('pre')), call scrollTo on that
pre element (not the text node), and update the assertion to verify the pre's
scrollLeft reflects the scroll (e.g., not 0 or equals the expected value) so the
horizontal scroll behavior is correctly tested.

In `@src/renderer/src/styles/globals.css`:
- Around line 131-132: Add a blank line before the "background: transparent;"
declaration to satisfy the stylelint rule declaration-empty-line-before; locate
the block containing "@apply text-foreground font-sans antialiased;" and insert
a single empty line directly above the "background: transparent;" line so the
"background" declaration is separated by one empty line from the previous
declaration.

---

Outside diff comments:
In `@src/main/services/settings.test.ts`:
- Around line 27-34: Add a dedicated test case to verify that areSettingsEqual
detects changes to windowBackgroundBlurRadius: create a new it(...) similar to
the existing primitive-diff test that calls areSettingsEqual(baseSettings, {
...baseSettings, windowBackgroundBlurRadius:
baseSettings.windowBackgroundBlurRadius + 1 }) and assert toBe(false). Reference
areSettingsEqual and baseSettings so the test fails if the blur comparison is
missing.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: d4246f70-4782-4739-8c69-5352cde1b11f

📥 Commits

Reviewing files that changed from the base of the PR and between cd4f322 and 8e63055.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !pnpm-lock.yaml
📒 Files selected for processing (17)
  • .storybook/fixtures.ts
  • package.json
  • src/main/index.ts
  • src/main/ipc/ipc-schemas.test.ts
  • src/main/ipc/ipc-schemas.ts
  • src/main/ipc/settings.ts
  • src/main/services/settings.test.ts
  • src/main/utils/windowBackgroundBlur.test.ts
  • src/main/utils/windowBackgroundBlur.ts
  • src/renderer/settings/sections/Appearance.browser.test.tsx
  • src/renderer/settings/sections/Appearance.tsx
  • src/renderer/src/App.tsx
  • src/renderer/src/components/skills/FileContent.browser.test.tsx
  • src/renderer/src/components/skills/FileContent.tsx
  • src/renderer/src/styles/globals.css
  • src/shared/settings.test.ts
  • src/shared/settings.ts

Comment thread src/main/ipc/ipc-schemas.test.ts
Comment thread src/main/utils/windowBackgroundBlur.test.ts
Comment thread src/renderer/settings/sections/Appearance.tsx
Comment thread src/renderer/src/components/skills/FileContent.browser.test.tsx Outdated
Comment thread src/renderer/src/styles/globals.css

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/renderer/settings/sections/Appearance.tsx`:
- Around line 111-113: The effect that syncs blur draft with
windowBackgroundBlurRadius must cancel any pending debounce timer so a stale
pending update doesn't overwrite a broadcasted value; modify the component to
store the pending timer ID (e.g., a ref like blurRadiusTimerRef used by the
slider update logic) and call clearTimeout on that ref inside the
useComponentEffect that runs setBlurRadiusDraft(windowBackgroundBlurRadius), and
also clear/replace the timer whenever the slider starts a new debounce; ensure
the code paths around the slider handler that call updateSettings({
windowBackgroundBlurRadius: ... }) set the ref so it can be cleared by
useComponentEffect to prevent stale updates.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: b5e94bc8-1a47-4b01-974c-a316d478368a

📥 Commits

Reviewing files that changed from the base of the PR and between 8e63055 and 0bf7255.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !pnpm-lock.yaml
📒 Files selected for processing (17)
  • .storybook/fixtures.ts
  • package.json
  • src/main/index.ts
  • src/main/ipc/ipc-schemas.test.ts
  • src/main/ipc/ipc-schemas.ts
  • src/main/ipc/settings.ts
  • src/main/services/settings.test.ts
  • src/main/utils/windowBackgroundBlur.test.ts
  • src/main/utils/windowBackgroundBlur.ts
  • src/renderer/settings/sections/Appearance.browser.test.tsx
  • src/renderer/settings/sections/Appearance.tsx
  • src/renderer/src/App.tsx
  • src/renderer/src/components/skills/FileContent.browser.test.tsx
  • src/renderer/src/components/skills/FileContent.tsx
  • src/renderer/src/styles/globals.css
  • src/shared/settings.test.ts
  • src/shared/settings.ts

Comment thread src/renderer/settings/sections/Appearance.tsx Outdated
@ryota-murakami ryota-murakami force-pushed the codex/update-deps-electron-opacity branch from 0bf7255 to b872bc8 Compare May 11, 2026 18:34
@ryota-murakami ryota-murakami merged commit e3db009 into main May 11, 2026
8 of 9 checks passed
@ryota-murakami ryota-murakami deleted the codex/update-deps-electron-opacity branch May 11, 2026 18:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants